<template>
	<view class="container">
		<m-header class="top" :list="adDatas"></m-header>
		<view class="shuzi u-m-t-20">
			<view class="count u-flex u-row-center">
			</view>

			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<block v-if="model.id > 0">
					<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
					 label="我是" prop="ws">
						<u-input :border="border" type="select" :select-open="selectShowWs" v-model="model.iam" placeholder="请选择"
						 placeholderStyle="color: #4B9CFF;" input-align="right" @click="selectShowWs = true"></u-input>
					</u-form-item>
					<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
					 label="我需要" prop="demand">
						<view style="width:100%;text-align: right;color: #4B9CFF;" @click="toimean">{{model.demand.lb || "请选择"}}</view>
					</u-form-item>
					<u-form-item class="group" :label-width="200" :border-bottom="false" :label-position="labelPosition"
					 label="我意向" prop="wyx">
						<view style="flex: 1;text-align: right;" @click="handleWyx">
							<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
						</view>
					</u-form-item>
					<view v-if="model.demand != ''" class="">
						<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="公社领域" prop="lb">
							<u-input :border="border" type="select" v-model="model.demand.lb" placeholder="请选择" placeholderStyle="color: #0D1D36;"
							 input-align="right"></u-input>
						</u-form-item>

						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition" label="专业方向" prop="professional">
							<u-input :border="border" type="select" v-model="model.demand.professional" placeholder="请选择" placeholderStyle="color: #0D1D36;"
							 input-align="right"></u-input>
						</u-form-item>

						<view class="qtsm u-m-l-40 u-m-r-30 u-m-t-40">
							<text class="hz">简短说明</text>
						</view>
						<u-form-item class="  zwpj u-m-l-30 u-m-r-30 "  :label-position="labelPosition" prop="jdsm">
							<u-input type="textarea" :border="border" placeholder="请输入简短说明" v-model="model.demand.jdsm" />
						</u-form-item>
					</view>
					<block v-if="model.intention != '' && model.iam !='个人'">

						<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="地域" prop="area">
							<u-input type="select" v-model="model.intention.area" placeholder="请选择" placeholderStyle="color: #0D1D36;"
							 input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-width="200" :label-position="labelPosition" label="企业性质" prop="enterpriseNature">
							<u-input type="select" v-model="model.intention.enterpriseNature" placeholder="请选择" placeholderStyle="color: #0D1D36;"
							 input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="擅长领域" prop="scly">
							<u-input :border="border" type="select" v-model="model.intention.enterpriseField" placeholder="请选择"
							 placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="企业资质" prop="qualification">
							<u-input :border="border" type="select" v-model="model.intention.qualification" placeholder="请选择"
							 placeholderStyle="color: #0D1D36;" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
						 label="质量体系" prop="quality">
							<u-input :border="border" placeholder="请输入" v-model="model.intention.quality" type="text" input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :label-position="labelPosition" label="诚信保证金" label-width="400" prop="zsbzj">
							<u-radio-group v-model="model.intention.zsbzj" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
								<u-radio shape="square" v-model="item.checked" v-for="(item, index) in checkboxListTwo" :key="index" :name="item.name">{{ item.name }}</u-radio>
							</u-radio-group>
						</u-form-item>
						<u-form-item v-if="zsbzj" class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label=""
						 prop="integrityDeposit">
							<u-input :border="border" placeholder="请输入保证金金额  元" v-model="model.intention.integrityDeposit" type="text"
							 input-align="right"></u-input>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" label-width="200" :label-position="labelPosition"
						 label="履约信誉" prop="performanceReputation">
							<u-input :border="border" placeholder="请输入" v-model="model.intention.performanceReputation" type="text"
							 input-align="right"></u-input>
						</u-form-item>
					</block>
					<block v-if="model.intention != '' && model.iam =='个人'">
						<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
						<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="专业" prop="specialty">
							<view style="width:100%;text-align: right;" @click="specialtyShow = true">{{model.intention.specialty || "请选择专业"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="职称" prop="profession">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.profession || "请选择职称"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="执业资格" prop="credentials">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.credentials || "请选择职称"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="地域" prop="region">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.region || "请选择职称"}}</view>
						</u-form-item>

						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="性别" prop="gender">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.gender || "性别"}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="擅长领域" prop="expertise">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.scly}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="人数" prop="num">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.num}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :label-position="labelPosition"
						 :border-bottom="true" label="学历" prop="requireEdu">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.requireEdu}}</view>
						</u-form-item>
						<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-position="labelPosition" label="在职情况"
						 label-width="490" prop="incumbency">
							<view class="value" style="width:100%;text-align: right;">{{model.intention.incumbency}}</view>
						</u-form-item>
					</block>
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="关键字" prop="bestKey">
						<u-input :border="border" placeholder="请输入" v-model="model.bestKey" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :label-position="labelPosition" label="屏蔽关键字" prop="blackKey">
						<u-input :border="border" placeholder="请输入" v-model="model.blackKey" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" label="匹配时效" prop="expiryTime">
						<u-input :border="border" @click="show = true" placeholder="请选择" v-model="model.expiryTime" type="text"
						 input-align="right"></u-input>
						<u-calendar v-model="show" ref="calendar" @change="change" mode="date" :start-text="startText" :end-text="endText"
						 :range-color="rangeColor" max-date="2022-10-01" :range-bg-color="rangeBgColor" :active-bg-color="activeBgColor">
						</u-calendar>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-40" :label-width="200" :label-position="labelPosition" :border-bottom="false"
					 label="匹配权重" prop="customize">
						<view style="flex: 1;text-align: right;" @click="handleClickWeight()">
							<u-icon name="arrow-right" style="color:#9DA2B0;font-size: 32upx;"></u-icon>
						</view>
					</u-form-item>
					<view class="fgx">

					</view>
				</block>
				<block v-else>
					<u-form-item class="u-m-l-30 u-m-r-30" label-width="200" :border-bottom="false" :label-position="labelPosition"
					 label="公社名称" prop="name">
						<u-input :border="border" placeholder="请输入" v-model="model.name" type="text" input-align="right"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :border-bottom="false"
					 :label-position="labelPosition" label="公社类型" prop="gslx">
						<u-input :border="border" type="select" :select-open="selectShowgslx" v-model="model.type" placeholder="请选择"
						 placeholderStyle="color: #0D1D36;" input-align="right" @click="selectShowgslx = true"></u-input>
					</u-form-item>
					<u-form-item class="u-m-l-30 u-m-r-30" :required="required" :label-width="200" :border-bottom="false"
					 :label-position="labelPosition" label="公社地域" prop="area">
					 <view style="width:100%;text-align: right;" @click="cityActive = true">{{model.area || "请选择"}}</view>
					<!-- 	<u-input type="select" :select-open="selectShowarea" v-model="model.area" placeholder="请选择" placeholderStyle="color: #0D1D36;"
						 input-align="right" @click="selectShowarea = true"></u-input> -->
					</u-form-item>
					<!-- 	<u-form-item  class="u-m-l-30 u-m-r-30" label-width="200" :border-bottom="false" :label-position="labelPosition" label="页面风格"
					 prop="gzdd">
					 <view class="styles">
						<view v-for="(item,index) in 5" class="raduis u-m-l-20" @click="hoverPage(index)" :class="{'active':pageIndex == index}"><u-icon class="icon" name="checkbox-mark" color="#fff"></u-icon></view>
					</view>
					</u-form-item> -->
					<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop"></u-gap>
				</block>
			</u-form>
		</view>

		<view class="ruletarget  u-flex u-row-start u-m-t-40 u-m-l-40">
			<image src="../../static/img/mubiaojs.png"></image>
			<text class="mubiao u-m-l-10">智汇公社目标</text>
		</view>
		<view class="u-flex u-row-start u-m-t-20 u-m-l-40">
			<text class="zhuanye">1、为专业人员建立技术交流平台 </text>
		</view>
		<view class="u-flex u-row-start u-m-t-20 u-m-l-40">
			<text class="zhuanye">2、为垂直领域企业搭建沟通对话的平台 </text>
		</view>

	<!-- 	<view class="ruletarget u-flex u-row-start u-m-t-40 u-m-l-40">
			<image src="../../static/img/rulejs.png"></image>
			<text class="mubiao u-m-l-10">智汇公社规则</text>
		</view>
		<view class="u-flex u-row-start u-m-t-20 u-m-l-40">
			<text class="zhuanye">1、为专业人员建立技术交流平台 </text>
		</view>
		<view class="u-flex u-row-start u-m-t-20 u-m-l-40">
			<text class="zhuanye">2、为垂直领域企业搭建沟通对话的平台 </text>
		</view> -->



		<view class="warp">
			<u-button class="button" v-if="model.id > 0" @click="submit">马上为我匹配</u-button>
			<u-button class="button" v-else @click="submit">提交申请</u-button>
			<!--弹出框-->
			<u-select mode="single-column" value-name="id" label-name="name" :list="wsList" v-model="selectShowWs" @confirm="selectConfirmWs"></u-select>
			<u-select mode="single-column" :list="typeCommunes" v-model="selectShowgslx" @confirm="Confirmtype"></u-select>
			<u-select :default-value="defaultValue" v-model="selectShowarea" mode="mutil-column-auto" value-name="value"
			 label-name="name" child-name="submenu" :list="listCitys" @confirm="confirmCity"></u-select>
			<city-select v-model="cityActive" @city-change="cityChange"></city-select>
			<!--弹出框-->
		</view>
	</view>
</template>
<script>
	import citySelect from '@/components/u-city-select.vue'
	export default {
	components: {
		citySelect
	},
		data() {
			let that = this;
			return {
				cityActive: false,
				adDatas:[],
				whetherThe: '',
				zsbzj: false,
				height: 20,
				bgColor: this.$u.color.bgColor,
				marginTop: 30,
				marginBottom: 30,
				wsList: [],
				selectShowWs: false,
				pageIndex: 0,
				//选择城市
				showCity: false,
				defaultValue: [3],
				listCitys: [],
				fetchDict: [],
				typeCommunes: [],
				/**
				 * form验证
				 * */
				model: {
					demand: '',
					intention: ''
				},
				rules: {
					iam: [{
						required: false,
						message: '请选择我是',
						trigger: 'change'
					}],
					name: [{
						required: false,
						message: '请选择公社名称',
						trigger: 'change'
					}],
					type: [{
						required: false,
						message: '请选择公社类型',
						trigger: 'change'
					}],
					area: [{
						required: false,
						message: '请选择公社地域',
						trigger: 'change'
					}]
				},
				required: false,
				border: false,
				check: false,
				selectStatus: 'close',
				selectShowarea: false,
				selectShowgslx: false,
				selectShowmajor: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['toast'],
				radio: '',
				radio1: '',
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				checkboxListTwo: [

					{
						name: '需要',
						checked: false,
						disabled: false
					},
					{
						name: '不需要',
						checked: false,
						disabled: false
					},
				],
				show: false,
				mode: 'range',
				result: "请选择日期",
				startText: '开始',
				endText: '结束',
				rangeColor: '#2979ff',
				rangeBgColor: 'rgba(41,121,255,0.13)',
				activeBgColor: '#2979ff',
			};
		},
		mounted() {},
		onShow() {
			let identity = this.$store.state.userInfo.identityType;
			if (identity == 0) {
				this.typeCommunes = [{
						value: "普通公社",
						label: "普通公社"
					},
					{
						value: "裂变公社",
						label: "裂变公社"
					}
				];
			} else {
				this.typeCommunes = [{
					value: "供应链公社",
					label: "供应链公社"
				}];
			}
			this.getResult();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(decodeURIComponent(options.data));
				console.log("data", data);
				this.model = data;
				this.model.imean = data.mode;
				console.log("model", this.model);
			}
			if (options.row) {
				this.model = JSON.parse(decodeURIComponent(options.row));
				console.log("row", this.model);
			}
			this.dictionaryFetchDict('commune_type'); //公社类型
			this.dictionaryFetchDict('professional_direction'); //专业方向
			//获取省市区
			this.cityList();
			this.getFetchUserExtra();
			this.findfetchAd(3);
			this.findextraIndex();
		},
		methods: {	
		
			cityChange(e) {
				let address = e.province.label
				if(e.city){
					address = address + '-' + e.city.label;
				}
				if(e.area){
					address = address + '-' + e.area.label;
				}
				this.model.area = address
			},										
			async findextraIndex(){
				let result = await this.$apis.extraIndex();
				this.endVal = this.endVal + result.data;
			},	
			async findfetchAd(type){
				let result = await this.$apis.fetchAd({type:type});
				this.adDatas = result.data;
			},	
			async getResult() {
				//是否已创建公社
				let result = await this.$apis.checkIsJoin();
				if (result.data.result) {
					this.isPost = false;
					this.statusTitle = result.data.statusTitle;
				}
			},
			handleClickWeight(e) {
				var model = encodeURIComponent(JSON.stringify(this.model));
				let url = encodeURIComponent(JSON.stringify("wisdomcommune/application"));
				if (this.model.wyx == '企业') {
					uni.navigateTo({
						url: '../user/companyWeight?type=' + url + '&row=' + model
					})
				} else if (this.model.wyx == '团队') {
					uni.navigateTo({
						url: '../user/teamWeight?type=' + url + '&row=' + model
					})
				} else {
					uni.navigateTo({
						url: '../user/personWeight?type=' + url + '&row=' + model
					})
				}
			},
			change(e) {
				this.model.expiryTime = e.result;
			},
			// 选择
			selectConfirmWs(e) {
				this.model.iam = '';
				e.map((val, index) => {
					this.model.iam += this.model.iam == '' ? val.label : '-' + val.label;
				});
			},
			handleWyx() {
				console.log('demand', this.model.demand);
				let identity = this.$store.state.userInfo.identityType;
				let url = encodeURIComponent(JSON.stringify("wisdomcommune/application"));
				if (this.model.demand != '') {
					if (identity == 1) {
						uni.navigateTo({
							url: '../wisdomcommune/applicationSelect/wyxContent?type=' + url + '&row=' + encodeURIComponent(JSON.stringify(
								this.model))
						})
					} else if (identity === 0) {
						uni.navigateTo({
							url: '../wisdomcommune/applicationSelect/personalWyxContent?type=' + url + '&row=' + encodeURIComponent(JSON.stringify(
								this.model))
						})
					}
				} else {
					uni.showToast({
						title: '请先选择我需要',
						icon: 'none'
					});
				}
			},
			toimean() {
				if (this.model.iam === undefined) {
					uni.showToast({
						title: "请选择我是",
						icon: "none"
					})
				} else {
					let url = encodeURIComponent(JSON.stringify("wisdomcommune/application"));
					uni.navigateTo({
						url: '../wisdomcommune/applicationSelect/wxyContent?type=' + url + '&row=' + encodeURIComponent(JSON.stringify(this
							.model))
					})
				}
			},
			async getFetchUserExtra() {
				let result = await this.$apis.fetchUserExtra({
					type: 0
				});
				this.wsList = result.data;
			},
			hoverPage(e) {
				console.log('pageIndex', e);
				this.pageIndex = e;
			},
			confirmCity(e) {
				this.model.area = '';
				e.map((val, index) => {
					this.model.area += this.model.area == '' ? val.label : '-' + val.label;
				})
			},
			changeDate(e) {
				this.model.ppsx = e.result;
			},
			async cityList() {
				let result = await this.$apis.fetchArea({
					level: 2
				});
				this.listCitys = result.data;
			},
			async dictionaryFetchDict(keyWords) {
				let result = await this.$apis.fetchDict({
					keyWords: keyWords
				});
				this.fetchDict[keyWords] = result.data;
			},
			//创建公社
			async submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.model.id > 0){							
							this.addcreateCommune();
						}else{
							this.addCommune();
						}
					} else {
						console.log('验证失败');
					}
				});

			},
			async addCommune(){
				if (this.model.type == "普通公社") {
					this.model.type = 1
				} else if (this.model.type == "裂变公社") {
					let result = await this.$apis.checkIsJoin();
					if (result.data.result) {
						if (result.data.statusTitle == '审核通过') {
							//this.statusTitle = "审核通过";
							this.model.type = 2
						} else {
							uni.showToast({
								title: "您的加入伙伴正在申请审核中！",
								icon: 'none'
							});
							return;
						}
					} else {
						uni.showToast({
							title: "请先申请加入伙伴！",
							icon: 'none'
						});
						return;
					}
				} else {
					this.model.type = 3
				}
				let data = await this.$apis.addCommune(this.model);
				if(data.code == 200){						
					var that = this;
					uni.showModal({
						title:"提示",
						content:"建社成功",
						confirmText:"马上匹配",
						success: (res) => {  
							if(res.confirm) {  
								that.model.id = data.data.id;
								that.$forceUpdate()
							}
						}  
					})
					
				}
				console.log(this.model)
			},
			// //企业建社
			// async addCommuneByCompany(){
			// 	try {
			// 		this.reqBody['name'] = this.model['name'];
			// 		this.reqBody['area'] = this.model['area'];
			// 		this.reqBody['major'] = this.model['major'];
			// 		this.reqBody['type'] = this.model['type'];
			// 		let data = await this.$apis.addCommuneByCompany(this.reqBody);
			// 		console.log(JSON.stringify(data));
			// 		// uni.setStorageSync("userInfo",data);
			// 		if(data.data.code == 200){
			// 			uni.showToast({
			// 					title: "创建公社成功",
			// 					icon: 'none'
			// 			});
			// 			setTimeout(()=>{
			// 				this.$mRouter.push({
			// 					route:this.$mRoutesConfig.communeSucceed,
			// 				 	query:{
			// 				 		data:encodeURIComponent(JSON.stringify(data.data.data)),
			// 				 	}
			// 				})
			// 				// uni.navigateTo({
			// 				// 	url:"/pages/wisdomcommune/communeSucceed?data="+data.data.data
			// 				// });
			// 			},1000)
			// 		}else if(data.data.code == 201){
			// 			//建社先缴费
			// 			uni.showToast({
			// 				title: data.data.msg,
			// 				icon: 'none'
			// 			});
			// 			// return;
			// 		}else if(data.data.code == 202){
			// 			uni.showToast({
			// 				title: data.data.msg,
			// 				icon: 'none'
			// 			});
			// 		}
			// 	} catch (e) {
			// 		console.log(e);
			// 		this.submitBtnDis = false;
			// 	}
			// },
			// //个人建社
			async addcreateCommune() {
				let data = await this.$apis.createCommune(this.model);
				console.log(JSON.stringify(data));
				// uni.setStorageSync("userInfo",data);
				if (data.code == 200) {
					uni.showToast({
						title: "服务匹配成功",
						icon: 'none'
					});
					setTimeout(() => {
						this.$mRouter.switchTab({
							route: this.$mRoutesConfig.message
						});
					}, 2000)
				} else {
					uni.showToast({
						title: "您还没有加入合伙人",
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/throughTrain/joinPartner"
						});
					}, 1000)
					return;
				}
			},
			selectKey(e) {
				this.keywords[e].selected = !this.keywords[e].selected;
			},
			// 选择
			selectConfirmHysx(e) {
				this.model.hysx = '';
				e.map((val, index) => {
					this.model.hysx += this.model.hysx == '' ? val.label : '-' + val.label;
				});
			},
			Confirmtype(e) {
				this.model.type = '';
				e.map((val, index) => {
					this.model.type += this.model.type == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmGslx(e) {
				if (e[0].value == "普通公社") {
					this.model.type = 1
				} else if (e[0].value == "裂变公社") {
					this.model.type = 2
				} else {
					this.model.type = 3
				}
				this.model.gslx = '';
				e.map((val, index) => {
					this.model.gslx += this.model.gslx == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmarea(e) {
				this.model.area = '';
				e.map((val, index) => {
					this.model.area += this.model.area == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmmajor(e) {
				this.model.major = '';
				e.map((val, index) => {
					this.model.major += this.model.major == '' ? val.label : '-' + val.label;
				});
			},
			selectConfirmQydy(e) {
				this.model.qydy = '';
				e.map((val, index) => {
					this.model.qydy += this.model.qydy == '' ? val.label : '-' + val.label;
				});
			}
		}
	};
</script>
<style scoped lang="scss">
	// page {
	// 	background: #f5f5f9;
	// }
	.top {
		width: 100%;
		height: 260rpx;
		background: $uni-bg-color-ad;

		.above {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 20rpx;

			}
		}

		.below {
			display: flex;
			justify-content: center;
			margin-left: -46rpx;

			.picture {
				width: 117.8rpx;
				height: 137.4rpx;
				margin-left: 25rpx;
				margin-top: 1rpx;
			}
		}
	}

	.count {
		margin-top: -50rpx;
		width: 100%;
		height: 33rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.count-to {
			font-size: 24rpx;
		}

		text {
			padding: 2rpx 12rpx;
			background: #ff9e21;
			color: #ffffff;
			font-size: 24rpx;
		}
	}

	.fgx {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
		margin-top: 40rpx;
	}

	.fgx1 {
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F9;
	}

	.group {
		padding: 6rpx 21rpx;
		// background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}

	.button {
		width: 662rpx;
		margin: 120rpx auto 50rpx auto;
		background: #ab61ff;
		border-radius: 40rpx;
		border: 0;
		color: #fff;

		&.u-hairline-border:after {
			border: 0;
		}
	}

	.word {
		font-size: 36rpx;
		color: #0d1d36;
		font-weight: bold;
	}

	.styles {
		display: flex;
		width: 100%;
		justify-content: flex-end;

		.raduis {
			width: 64rpx;
			height: 64rpx;
			background: #BF0000;
			border-radius: 50%;
			text-align: center;
			display: flex;
			justify-content: center;

			.icon {
				display: none;
				color: #fff;
				margin: 16rpx auto;
			}

			&:nth-child(2) {
				background: #3C8EED;
			}

			&:nth-child(3) {
				background: #F5C416;
			}

			&:nth-child(4) {
				background: #AB61FF;
			}

			&:nth-child(5) {
				background: #828792;
			}

			&.active {
				.icon {
					display: block;
				}
			}
		}

	}




	.ruletarget image {
		width: 40rpx;
		height: 40rpx;

	}

	.mubiao {

		font-weight: bold;
		font-size: 36rpx;

		color: #0D1D36;
	}

	.zhuanye {

		font-size: 30rpx;
		color: #9DA2B0;
	}

	.group {
		padding: 6rpx 21rpx;
		background: #f1f7ff;
		border-radius: 6rpx;
		margin: 30rpx 30rpx 0 30rpx;
	}
</style>
